<template>
  <div class="max-w-4xl mx-auto px-4 py-8">
    <div v-if="article" class="bg-white shadow-lg rounded-lg overflow-hidden">
      <div class="p-6">
        <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ article.title }}</h1>
        <div class="flex items-center text-gray-600 mb-6">
          <span class="mr-4">作者：{{ article.authorName }}</span>
          <span>發布時間：{{ formatDate(article.createTime) }}</span>
        </div>
        <div class="prose max-w-none">
          {{ article.content }}
        </div>
      </div>
    </div>
    <div v-else class="text-center py-8">
      <p class="text-gray-600">加載中...</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const article = ref(null)

const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString('zh-TW', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const fetchArticle = async () => {
  try {
    const response = await axios.get(`/content/articles/${route.params.id}`)
    article.value = response.data
  } catch (error) {
    console.error('獲取文章失敗:', error)
  }
}

onMounted(() => {
  fetchArticle()
})
</script>

<style>
.prose {
  line-height: 1.8;
  color: #374151;
}
</style> 